<template>
  <div class="all">
    <!-- 左侧Logo -->
    <router-link to="/home" class="logo-container">
      <img :src="logoImg" alt="Logo" class="logo">
    </router-link>

    <!-- 中间菜单 -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="transparent"
        :ellipsis="false"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/feature1">猫娘对话</el-menu-item>
      <el-menu-item index="/feature2">功能2</el-menu-item>
      <el-menu-item index="/feature3">功能3</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
    </el-menu>

    <!-- 右侧头像 -->
    <div class="menu-right">
      <el-dropdown @command="handleCommand">
        <div class="user-info">
          <img
              v-if="isLoggedIn"
              :src="userAvatar"
              alt="用户头像"
              class="avatar"
          >
          <span v-if="isLoggedIn" class="username">{{ userInfo.username }}</span>
          <span v-else class="login-text">未登录</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="isLoggedIn" command="logout">退出登录</el-dropdown-item>
            <el-dropdown-item v-else command="login">登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
// 导入本地头像图片
import avatarImg from '@/assets/avatar.jpg'
// 导入logo图片
import logoImg from '@/assets/logo.png'

const router = useRouter()
const activeIndex = ref(router.currentRoute.value.path)

// 登录状态管理
const isLoggedIn = ref(false)
const userInfo = ref({
  username: '管理员',
  avatar: avatarImg // 使用本地图片路径
})
const userAvatar = computed(() => userInfo.value.avatar)

// 初始化检查登录状态
onMounted(() => {
  const user = localStorage.getItem('user')
  if (user) {
    const parsedUser = JSON.parse(user)
    isLoggedIn.value = true
    // 保持本地头像路径，仅更新用户名
    userInfo.value = {
      ...parsedUser,
      avatar: avatarImg
    }
  }
})

const handleSelect = (index: string) => {
  router.push(index)
  activeIndex.value = index
}

const handleCommand = (command: string) => {
  if (command === 'logout') {
    // 退出登录逻辑
    localStorage.removeItem('user')
    isLoggedIn.value = false
    ElMessage({
      message: '已成功退出登录',
      type: 'success'
    })
    router.push('/login')
  } else if (command === 'login') {
    // 跳转到登录页
    router.push('/login')
  }
}
watch(() => router.currentRoute.value.path, (newPath) => {
  activeIndex.value = newPath
})
</script>

<style scoped>
.all {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #f0f8ff; /* 修改为淡蓝色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo {
  height: 32px;
  width: auto;
}

.el-menu-demo {
  display: flex;
  justify-content: center;
  border-bottom: none;
  margin: 0;
  flex: 1; /* 关键：让菜单占据中间的所有可用空间 */
  max-width: 800px; /* 限制菜单最大宽度，避免在大屏幕上过度分散 */
}

.el-menu-demo .el-menu-item {
  padding: 0 20px;
  font-size: 16px;
  color: #303133;
}

.el-menu-demo .el-menu-item.is-active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.menu-right {
  display: flex;
  align-items: center;
  margin-right: 28px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 15px;
  height: 40px;
  transition: background-color 0.3s;
  border-radius: 4px;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
  object-position: center;
  border: 1px solid #ebeef5;
}

.username, .login-text {
  margin-right: 5px;
  font-size: 14px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .all {
    padding: 0 10px;
  }

  .el-menu-demo {
    display: none; /* 小屏幕隐藏菜单 */
  }

  .avatar {
    width: 28px;
    height: 28px;
  }

  .username, .login-text {
    display: none; /* 小屏幕隐藏用户名文字 */
  }
}
.el-menu-demo .el-menu-item.is-active {
  color: #303133 !important;     /* 恢复普通颜色 */
  background-color: transparent !important;
}
.el-menu-demo .el-menu-item:hover {
  background-color: #e6f7ff !important;
  color: #409eff !important;
}

</style>